Ext.define('Admin.view.main.module.SimpleLine', {
    extend: 'Ext.panel.Panel',
    xtype: 'simpleline',

    initComponent: function () {
        this.model = Admin.view.main.factory.ModelFactory.getModelByName(this.modelName);
        this.store = Ext.create('Admin.store.Base', {
            model: this.model,
            proxy: {
                url: '/api/' + this.url,
                headers: {
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            }
        });
        this.tbar = ['->', {
            xtype: 'label',
            text: '开始日期: '
        }, {
            xtype: 'datefield',
            itemId: 'start_date',
            format: 'Y-m-d'
        }, {
            xtype: 'label',
            text: '结束日期: '
        }, {
            xtype: 'datefield',
            itemId: 'end_date',
            format: 'Y-m-d'
        }, {
            text: '加载',
            handler: this.loadData
        }, {
            text: '保存',
            handler: this.saveChart
        }, '->'];
        this.items = [{
            xtype: 'cartesian',
            height: 500,
            store: this.store,
            insetPadding: {
                left: 40,
                right: 40,
                bottom: 40
            },
            innerPadding: {
                left: 40,
                right: 40
            },
            axes: [{
                type: 'numeric',
                fields: 'Times',
                position: 'left',
                grid: true,
                adjustByMajorUnit: true,
                title: this.title
            }, {
                type: 'category',
                fields: 'LogDate',
                position: 'bottom',
                grid: true,
                title: '日期',
                label: {
                    rotate: {
                        degrees: -90
                    }
                }
            }],
            series: [{
                type: "line",
                xField: "LogDate",
                yField: "Times",
                style: {
                    lineWidth: 4
                },
                marker: {
                    radius: 4
                },
                highlight: {
                    fillStyle: "#000",
                    radius: 5,
                    lineWidth: 2,
                    strokeStyle: "#fff"
                },
                tooltip: {
                    trackMouse: true,
                    style: "background: #fff",
                    showDelay: 0,
                    dismissDelay: 0,
                    hideDelay: 0,
                    renderer: function (storeItem, item) {
                        this.setHtml(storeItem.get("LogDate") + ": " + storeItem.get("Times"));
                    }
                }
            }]
        }];
        this.callParent();
    },

    saveChart: function () {
        this.up('panel').down('cartesian').download();
    },

    loadData: function () {
        var toolbar = this.up('toolbar'),
            store = this.up('panel').down('cartesian').getStore();
        store.load({
            params: {
                start_date: toolbar.down('#start_date').getValue(),
                end_date: toolbar.down('#end_date').getValue()
            }
        });
    }
});
